<template>
  <div class="homeDetail">
    <div class="tabr-nav-title">
      <van-nav-bar
        title="工单办结"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 步骤一 -->

    <div class="formList">
      <van-form  label-width="100%" label-align="top" ref="setp1FormRef">
        <van-cell-group>
          <van-field
            v-model="fromDataSetp1.lenthtKm"
            type="number"
            name="lenthtKm"
            label="雨水管网长度(km)"
            required
            :rules="[formRules.required]"
          >
            <template #button>
              <span>计划:{{detail.planLenthtKm}}km</span>
            </template>
          </van-field>
          <van-field
            v-model="fromDataSetp1.wuLenthtKm"
            type="number"
            name="lenthtKm"
            label="污水管网长度(km)"
            required
            :rules="[formRules.required]"
          >
            <template #button>
              <span>计划:{{detail.wuPlanLenthtKm}}km</span>
            </template>
          </van-field>
          <van-field
            v-model="fromDataSetp1.raintNum"
            type="number"
            name="raintNum"
            label="雨水口(座次)"
            required
            :rules="[formRules.required]">
             <template #button>
              <span>计划:{{detail.planRaintNum}}座次</span>
            </template>
          </van-field>
          <van-field
            v-model="fromDataSetp1.welltNum"
            type="number"
            name="welltNum"
            label="雨水检查井(座次)"
            required
            :rules="[formRules.required]">
            <template #button>
              <span>计划:{{detail.planWelltNum}}座次</span>
            </template>
          </van-field>
          <van-field
            v-model="fromDataSetp1.wuWelltNum"
            type="number"
            name="welltNum"
            label="污水检查井(座次)"
            required
            :rules="[formRules.required]">
            <template #button>
              <span>计划:{{detail.wuPlanWelltNum}}座次</span>
            </template>
          </van-field>
          <van-field
            v-model="fromDataSetp1.emissiontNum"
            type="number"
            name="emissiontNum"
            label="排放口(座次)"
            required
            :rules="[formRules.required]">
            <template #button>
              <span>计划:{{detail.planEmissiontNum}}座次</span>
            </template>
          </van-field>
          <van-field
            v-model="fromDataSetp1.watertPump"
            type="number"
            name="watertPump"
            label="雨水泵站(座次)"
            required
            :rules="[formRules.required]">
            <template #button>
              <span>计划:{{detail.planWatertPump}}座次</span>
            </template>
          </van-field>
          <van-field
            v-model="fromDataSetp1.wuWatertPump"
            type="number"
            name="watertPump"
            label="污水泵站(座次)"
            required
            :rules="[formRules.required]">
            <template #button>
              <span>计划:{{detail.wuPlanWatertPump}}座次</span>
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </div>
    <div class="detailFoot">
      <van-button
        style="flex: 1"
        type="primary"
        size="small"
        @click="submitClick"
        >确认办结</van-button>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showSuccessToast, showToast, showConfirmDialog } from "vant";
import { patrolDoneWork, getPatrolWorkDetail } from "@/api/identification";
import formRules from "@/utils/formRules.ts";
const onClickLeft = () => history.back();
const router = useRouter();
const route = useRoute();
const query = route.query;
const detail = reactive({} as any)
const setp1FormRef = ref();
const fromDataSetp1 = reactive({
  id: query.id,
  lenthtKm: '',
  raintNum: '',
  welltNum: '',
  emissiontNum: '',
  watertPump: ''
})
const submitClick = async () => {
  await setp1FormRef.value.validate();

  const obj = {
    ...fromDataSetp1
  }
  patrolDoneWork(obj).then(res => {
    if (res.data && res.data.code === 200) {
      showSuccessToast("提交成功");
      history.back();
    } else {
      showConfirmDialog({
        title: '工单办结',
        allowHtml: true,
        message: `<span style="color: #ff0000">${res.data.message || '提交失败'}</span>`,
      }).then((res) => {
        // on close
      })
    }
  }).catch((err) => {
    showToast(err.message)
  });
};

onMounted(async () => {
  const { id } = route.query
  const res = await getPatrolWorkDetail(id)
  if (res.data && res.data.code === 200) {
    Object.assign(detail, {
      ...res.data.data
    })
  }
})
</script>

<style scoped lang="less">
.map-button {
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding)
}
.homeDetail {
  height: 100vh;
  background: #f7f8f7;
}

.homeHeader {
  padding: 10px;
  background: #fff;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}

.tabr-nav-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 44px;
  font-size: 18px;
  color: #29292c;
  text-align: center;
  font-style: normal;
  background: #fff;
  width: 100vw;
}
.formList {
  height: calc(100vh - 135px);
  margin: 10px 0;
  overflow-y: auto;
  background: #fff;
}
.uploadButton {
  padding: 10px;
  box-sizing: border-box;
  :deep(.van-uploader) {
    width: 100%;
    .van-uploader__input-wrapper {
      width: 100%;
      .van-button {
        width: 100%;
      }
    }
  }
}
.van-stepper {
width: 100%;
}
::v-deep .van-stepper__input {
  width: calc(100% - 28px - 28px - 4px) !important;
}
.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
</style>
